<template>
  <view class="index">
    <!-- 返回 -->
    <view>
      <navTabrBack
        :title="'发布专利'"
        :navbackStyle="['padding-right: 20rpx;']"
      ></navTabrBack>
    </view>
  </view>
  <!-- 新建委托 -->
  <view style="background-color: #fafafa; padding: 40rpx 0">
    <view class="entrustInfo">
      <view class="userItem useIpt">
        <view class="userPhone">专利号</view>

        <input
          v-model="dataList.num"
          placeholder="点击输入文本"
          maxlength="13"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="userItem useIpt" style="border: 0">
        <view class="userPhone">专利名称</view>
        <input
          v-model="dataList.name"
          placeholder="点击输入文本"
          maxlength="40"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="userItem useIpt" style="border: 0">
        <view class="userPhone">ipc分类号</view>
        <input
          v-model="dataList.type"
          placeholder="点击输入文本"
          maxlength="40"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="userItem useIpt">
        <view class="userPhone">申请人</view>

        <input
          v-model="dataList.applyName"
          placeholder="所有申请人用符号“ ；”隔开"
          maxlength="20"
          placeholder-class="input-placeholder"
        />
      </view>
      <view class="userItem useIpt">
        <view class="userPhone">发明人</view>

        <input
          v-model="dataList.inventor"
          placeholder="所有发明人用符“ ；”隔开"
          maxlength="20"
          placeholder-class="input-placeholder"
        />
      </view>
    </view>
    <!-- picker -->
    <view class="entrustInfo">
      <view>
        <view class="userItem">
          <view class="editTitle">专利类型</view>
          <view class="editData" @click="tuEditName">
            <view class="uni-list-cell-left">
              <picker @change="bindPickerChange1" :value="index" :range="dic">
                <view class="uni-input">{{ dic[index] }}</view>
              </picker>
            </view>
            <view class="uni-list-cell-db">
              <!-- <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="uni-input">{{ array[index] }}</view>
              </picker> -->
            </view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem">
          <view class="editTitle">专利状态</view>
          <view class="editData">
            <view class="uni-list-cell-left">
              <picker @change="bindPickerChange" :range="array">
                <view class="uni-input">{{ dataList.baseStatus }}</view>
              </picker>
            </view>
            <view class="uni-list-cell-db">
              <!-- <picker @change="bindPickerChange" :value="index" :range="array">
                <view class="uni-input">{{ array[index] }}</view>
              </picker> -->
            </view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem" style="border: 0">
          <view class="editTitle">授权公告日</view>
          <view class="editData">
            <uni-datetime-picker
              type="datetime"
              @change="pickerClick('authDate')"
              v-model="timeData.authDate"
              return-type="timestamp"
              >{{
                timeData.authDate.length != 0
                  ? formatDate(timeData.authDate).split("T")[0]
                  : "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
              }}</uni-datetime-picker
            >
            <view
              :style="
                timeData.authDate.length != 0 ? 'display:inline-block;' : 'display:none;'
              "
              class="iconfont icon-closel cral"
              @click="closel('authDate')"
            ></view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem" style="border: 0">
          <view class="editTitle">申请日</view>
          <view class="editData">
            <uni-datetime-picker
              type="datetime"
              @change="pickerClick('applyDate')"
              v-model="timeData.applyDate"
              return-type="timestamp"
              >{{
                timeData.applyDate.length != 0
                  ? formatDate(timeData.applyDate).split("T")[0]
                  : "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
              }}</uni-datetime-picker
            >
            <view
              :style="
                timeData.applyDate.length != 0 ? 'display:inline-block;' : 'display:none;'
              "
              class="iconfont icon-closel cral"
              @click="closel('applyDate')"
            ></view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem" style="border: 0">
          <view class="editTitle">办登截止日</view>
          <view class="editData">
            <uni-datetime-picker
              type="datetime"
              @change="pickerClick('recoverDate')"
              v-model="timeData.recoverDate"
              return-type="timestamp"
              >{{
                timeData.recoverDate.length != 0
                  ? formatDate(timeData.recoverDate).split("T")[0]
                  : "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
              }}</uni-datetime-picker
            >
            <view
              :style="
                timeData.recoverDate.length != 0
                  ? 'display:inline-block;'
                  : 'display:none;'
              "
              class="iconfont icon-closel cral"
              @click="closel('recoverDate')"
            ></view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem" style="border: 0">
          <view class="editTitle">恢复截止日</view>
          <view class="editData">
            <uni-datetime-picker
              type="datetime"
              @change="pickerClick('registerDate')"
              v-model="timeData.registerDate"
              return-type="timestamp"
              >{{
                timeData.registerDate.length != 0
                  ? formatDate(timeData.registerDate).split("T")[0]
                  : "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
              }}</uni-datetime-picker
            >
            <view
              :style="
                timeData.registerDate.length != 0
                  ? 'display:inline-block;'
                  : 'display:none;'
              "
              class="iconfont icon-closel cral"
              @click="closel('registerDate')"
            ></view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem" style="border: 0">
          <view class="editTitle">专利到期日</view>
          <view class="editData">
            <uni-datetime-picker
              type="datetime"
              @change="pickerClick('endDate')"
              v-model="timeData.endDate"
              return-type="timestamp"
              >{{
                timeData.endDate.length != 0
                  ? formatDate(timeData.endDate).split("T")[0]
                  : "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"
              }}</uni-datetime-picker
            >
            <view
              :style="
                timeData.endDate.length != 0 ? 'display:inline-block;' : 'display:none;'
              "
              class="iconfont icon-closel cral"
              @click="closel('endDate')"
            ></view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="newContent">
      <view>专利摘要</view>
      <textarea
        class="editContent"
        v-model="dataList.summary"
        placeholder="请输入新的专利摘要"
        maxlength="500"
      />
      <view class="textareaSum">（{{ dataList.summary?.length }}/500</view>
    </view>
    <!-- <view class="newContent">
      <view>专利摘要</view>
      <textarea class="editContent" placeholder="请输入新的专利摘要" maxlength="200" />
      <view class="textareaSum">（150/200）</view>
    </view> -->
    <button class="entrustBtn" @click="newSubmitOatent">发布</button>
  </view>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="新建成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message" type="message" :safe-area="true">
    <uni-popup-message type="error" :message="msg" :duration="1000"></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { onMounted, inject, reactive, toRefs, ref } from "vue";
const $url = inject("$url");

let data = reactive({
  userInfo: {},
  userToken: "",
  index: 0,
  msg: "",
  arr1: [],
  dic: [],
  array: ["授权未下证", "已下证"],
  timeData: {
    authDate: "",
    applyDate: "",
    recoverDate: "",
    registerDate: "",
    endDate: "",
  },
  dataList: {
    desc: "",
    num: "",
    applyName: "",
    endTime: "",
    userId: "",
    name: "",
    baseStatus: "授权未下证",
    type: "",
    baseTypeName: "",
    inventor: "",
    isEmpowered: 0,
    summary: "",
    type_main: "",
  },
});

let { array, dic, dataList, index, timeData, msg } = toRefs(data);
let success = ref();
let message = ref();
onMounted(() => {
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      data.dataList.userId = res.data.ID;
      data.userToken = res.data.token;
      // data.dataList.applyName = res.data.userName;
    },
  });
  // Object.keys(data.timeData).map((time) => {
  //   data.timeData[time] = new Date();
  //   data.dataList[time] = formatDate(new Date());
  // });
  uni.request({
    url: $url + `/zlBaseType/getZlBaseTypeList `,
    method: "GET",
    timeout: 6000,
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      data.arr1 = res.data.data.list;
      data.dataList.desc = res.data.data.list[data.index]?.name
        ? res.data.data.list[data.index]?.name
        : "暂无配置";
      data.dic = res.data.data.list.map((item) => {
        return item.name;
      });
      if (data.dic.length == 0) {
        data.dic.push("暂无配置");
      }
    },
  });
});
const pickerClick = (name) => {
  setTimeout(() => {
    data.timeData[name] = new Date(data.timeData[name]);
    data.dataList[name] = formatDate(Date.parse(data.timeData[name]));
  }, 0);
};
const bindPickerChange = (e) => {
  data.dataList.baseStatus = data.array[e.detail.value];
  data.dataList.isEmpowered = e.detail.value * 1;
};
const bindPickerChange1 = (e) => {
  data.index = e.detail.value;
  data.arr1.map((item) => {
    if (item.name == data.dic[e.detail.value]) {
      data.dataList.desc = item.name;
    }
  });
};
const closel = (key) => {
  data.dataList[key] = "";
  data.timeData[key] = "";
};
const newSubmitOatent = () => {
  let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
  if (reg.test(data.dataList.num.trim())) {
    data.msg = "专利号不能有汉字！";
    message.value.open();
    return;
  }
  if (data.dataList.num.trim().length == 0) {
    data.msg = "请输入专利号！";
    message.value.open();
    return;
  }
  if (data.dataList.name.trim().length == 0) {
    data.msg = "请输入专利名称！";
    message.value.open();
    return;
  }
  if (data.dataList.type.trim().length == 0) {
    data.msg = "请输入ipc分类号！";
    message.value.open();
    return;
  }
  if (data.dataList.desc.trim().length == 0) {
    data.msg = "请选择专利类型！";
    message.value.open();
    return;
  }
  if (data.dataList.baseStatus.trim().length == 0) {
    data.msg = "请选择专利专利状态！";
    message.value.open();
    return;
  }
  if (data.dataList.applyDate.length == 0) {
    data.msg = "请选择申请时间！";
    message.value.open();
    return;
  }
  if (data.dataList.authDate.length == 0) {
    data.msg = "请选择授权时间！";
    message.value.open();
    return;
  }
  uni.request({
    url: $url + `/zlBase/createZlBase`,
    method: "POST",
    timeout: 6000,
    data: data.dataList,
    header: {
      "x-token": data.userToken,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      success.value.open();
      setTimeout(() => {
        uni.navigateBack({
          fail: () => {
            uni.switchTab({
              url: "/pages/index/index",
            });
          },
          success: () => {
            let page = getCurrentPages().pop();
            if (page) {
              page.onLoad(page.options); //执行上个页面的方法
            }
          },
        });
      }, 1000);
    },
  });
};
const formatDate = (time) => {
  var date = new Date(time);
  var YY = date.getFullYear() + "-";
  var MM =
    (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
  var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hh = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var mm = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
  var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return YY + MM + DD + "T" + hh + mm + ss + "Z";
};
</script>

<style scoped>
.cral {
  background-color: #999999;
  border-radius: 50%;
  color: #ffffff;
}

.editData .uni-date,
.editData .uni-date-editor {
  width: 100rpx !important;
}
.index {
  background: #fff;
  padding: 0 0 10rpx 28rpx;
}
.newTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 27rpx;
  height: 100rpx;
  background: #ffffff;
  font-size: 29rpx;
}
.entInput {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.newTitle input {
  flex: 1;
  margin-left: 40rpx;
  padding-right: 27rpx;
  font-weight: 400;
  color: #999999;
}
.newContent {
  margin-top: 27rpx;
  padding: 27rpx 27rpx 30rpx 27rpx;
  background: #ffffff;
  font-size: 29rpx;
  font-weight: 400;
  color: #999999;
}
.editContent {
  margin-top: 10rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  max-height: 450rpx;
  min-height: 150rpx;
}
.entrustInfo {
  margin-top: 30rpx;
  padding: 0 27rpx 10rpx 27rpx;
  background: #ffffff;
}
.textareaSum {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  text-align: right;
}
.userItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  padding: 24rpx 10rpx 24rpx 10rpx;
  border-bottom: 1rpx solid #f7f7f7;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.userItem input {
  flex: 1;
}
.editTitle {
  flex: none;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.editData .iconfont {
  margin-left: 25rpx;
  font-size: 28rpx;
}
.editData {
  display: flex;
  align-items: center;
}
/* .editData image {
  margin-right: 27rpx;
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
} */
.mr {
  margin-right: 27rpx;
  margin-left: 27rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.entrustBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 38rpx 27rpx;
  height: 91rpx;
  background: #1677ff;
  box-shadow: 2rpx 2rpx 9rpx 0rpx #c3c3c5;
  border-radius: 44rpx;
  font-size: 29rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.userPhone {
  width: 150rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.useIpt {
  justify-content: flex-start;
}
.dataList {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  background: rgba(153, 153, 153, 0.8);
}
.addItemTitle {
  width: 507rpx;
  padding-top: 21rpx;
  background: #ffffff;
  border-radius: 14rpx;
}
.contacts {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 33rpx;
  font-weight: 700;
  color: #333333;
}
.ctsInput {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 16rpx;
  margin: 32rpx 21rpx 0 21rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.identifyingCode {
  display: flex;
  justify-content: space-between;
  margin: 27rpx 21rpx 50rpx 21rpx;
}
.ctsInputCode,
.InputCode {
  display: flex;
  align-items: center;
  flex: 0 0 46%;
  width: 201rpx;
  height: 72rpx;
  background: #f5f5f5;
  border-radius: 11rpx;
  border: 0;
}
.ctsInputCode {
  padding-left: 16rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.InputCode {
  margin: 0;
  padding: 0;
  justify-content: center;
  font-size: 25rpx;
  font-weight: 400;
  color: #1677ff;
}
.InputCode::after {
  border: 0;
  display: none;
}
.affirm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  height: 90rpx;
  border-top: 1px solid #e5e5e5;
}
.affirm view {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.solid {
  color: #1677ff;
  border-left: 1rpx solid #e5e5e5;
}
</style>
